<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:10px;
        }
        .d1{
            width:200px;
            height:200px;
            background-color: #1F87CC;
        }
        #d1{
            width:300px;
            height:300px;
            background-color: #FAA53B;
        }
        p{
            font-size:30px;
        }
        div,p{
            font-size:10px;
        }
        /*div>p{
            font-size:40px;
            color: white;
        }
        div+p{
            color:blue;
        }
        [class]{
            color:red;
        }
        [class=p1]{
            color: yellow;
        }
        [class*="f"]{
            color:#1F87CC;
        }
        [class$="a"]{
            color:green;
        }
        a:link{
            color: #FAA53B;
        }
        a:visited{
            color: #000033;
        }
        a:active{
            color: #FF0000;
        }
        a:hover{
            color:#FFFFED;
        }
        input:focus{
            width:200px;
            height:20px;
            border: 2px solid #FFFFED;
        }
        p:first-letter{
            font-size:30px;
        }
        p:first-line{
            color:red;
        }
        p:first-child{
            color:blue;
        }
        p:before{
            content: "给所有p前面添加内容";
        }
        p:after{
            content: "给所有p后面添加内容";
        }
        p:lang(fb){ /*选择lang属性为fb的p元素*/
           /* color:red;
        }
        a~p{
            font-size:50px; /*选择前面有a元素的p元素*/
        /*}*/
        /*p:last-of-type{
            color: blue;
        }
        h2:first-of-type{
            color:red;
        }
        p:only-of-type{
            color:red; /*选择属于其父元素的唯一子元素的每个 <p> 元素。*/
        /*}
        p:nth-child(3){
            color:red;
        }
        p:nth-last-child(4){
            color:blue;
        }
        p:nth-of-type(5){
            color:green;
        }
        p:nth-last-of-type(2){
            color:green;
        }
        p:last-child{
            color:red;
        }
        :root{  相当于*
            color:red;
        }*/
        /*p:empty{
            background-color:red;
        }*/
        /*input:enabled{
            width:200px;
            height:20px;
            border: 2px solid #FFFFED;
        }
        input:disabled{
            width:200px;
            height:20px;
            border: 2px solid #FFFFED;
        }
        input:checked{
            width:200px;
            height:20px;
        }
        :not(p){
            color:red;
        }*/
        ::selection
        {
            color:#ff0000;
        }
    </style>
</head>
<body>
<p></p>
<h2>选择器</h2>
<div class="d1">
    <p>123</p>
    <p>123</p>
    <p>123</p>
    <p>123</p>
    <p>123</p>
</div>
<div id="d1">
    <p>123</p>
    <a href="http://www.baidu.com"><p>百度</p></a>
</div>
<p>选择所有p元素。</p>
<p class="p1">选择所有带class属性的元素。<br>选择所有带class属性的元素。<br>选择所有带class属性的元素。<br>选择所有带class属性的元素。</p>
<p class="p1">选择所有class属性为p1的元素。</p>
<p class="p1">选择所有class属性为p1的元素。</p>
<p class="fa">选择 class 属性包含单词 "f" 的所有元素。。</p>
<p class="fa">选择 class 属性包含单词 "f" 的所有元素。。</p>
<p lang="fb">选择所有p元素。</p>

<a href="http://www.baidu.com">百度</a>
<a href="http://www.baidu.com"><p>百度</p></a>
<a href="http://www.baidu.com"><p>百度</p></a>
<a href="http://www.baidu.com"><p>百度</p></a>
<input type="text" disabled>
<input type="text">
<input type="text">
<input type="text">
<p lang="fb">选择所有p元素。</p>
<input type="radio" checked="checked" value="male" name="gender" /> Male<br>
<input type="radio" value="female" name="gender" /> Female<br>
<input type="checkbox" checked="checked" value="Bike" /> I have a bike<br>
<input type="checkbox" value="Car" /> I have a car
</body>
</html>